<template>
  <div style="width: 80%;margin: 0px auto;">

    <div class="table">
      <div style="text-align: center;color: #2a60c9;"><h2>基本信息</h2></div>

      <el-row class="dialog-row" type="flex" style="margin-top: 20px">
        <el-col v-for="(item,index) in objSort" :key="index" :span="spanCol24.includes(item) ? 24 : 12">
          <div class="col">
            <span class="col-title" >{{ objMap[item] }}</span>
            <span class="col-content">{{ expenseData[item] || '/' }}</span>
          </div>
        </el-col>
      </el-row>

      <div style="text-align: center;color: #2a60c9;margin-top: 20px;"><h2>报销明细</h2></div>

      <el-row class="dialog-row" type="flex" style="margin-top: 20px">
        <el-col v-for="(item ,index) in expenseDetailData" :key="index">
          <div class="col">
            <span class="col-title" >{{item.amountType}}</span>
            <span class="col-content">{{ item.amount || '/' }}</span>
            <span class="col-title" >描述</span>
            <span class="col-content">{{ item.description || '/' }}</span>
          </div>
        </el-col>
        <el-col v-for="(item,index) in objSort1" :key="index" :span="spanCol24.includes(item) ? 24 : 12">
          <div class="col">
            <span class="col-title" >{{ objMap[item] }}</span>
            <span class="col-content">{{ expenseData[item] || '/' }}</span>
          </div>
        </el-col>
      </el-row>

      <div style="text-align: center;color: #2a60c9;margin-top: 20px;"><h2>审核记录</h2></div>

      <el-row class="dialog-row" type="flex" style="margin-top: 20px">
        <el-col>
          <div class="col">
            <span class="col-title-expenses" >创建时间</span>
            <span class="col-title-expenses">处理人</span>
            <span class="col-title-expenses">处理记录</span>
            <span class="col-title-expenses">审核时间</span>
            <span class="col-title-expenses">处理意见</span>
          </div>
        </el-col>
        <el-col v-for="(item ,index) in recordDetailData" :key="index">
          <div class="col">
            <span class="col-content" >{{item.createTime  }}</span>
            <span class="col-content" >{{item.handlerName  }}</span>
            <span class="col-content">{{ item.processingResult  }}</span>
            <span class="col-content">{{ item.processingTime  }}</span>
            <span class="col-content">{{ item.comments }}</span>
          </div>
        </el-col>
      </el-row>


    </div>



  </div>
</template>

<script>
export default {
  name: "ExpenseInfo",
  data() {
    return {
      tableData: [],  // 所有的数据
      pageNum: 1,   // 当前的页码
      pageSize: 10,  // 每页显示的个数
      total: 0,
      title: null,
      fromVisible: false,
      form: {},
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      rules: {
        title: [
          {required: true, message: '请输入标题', trigger: 'blur'},
        ],
        content: [
          {required: true, message: '请输入内容', trigger: 'blur'},
        ]
      },
      ids: [],
      expensesId : this.$route.query.expensesId,
      expenseData : {},
      expenseDetailData : {},
      recordDetailData : {},

      detail: {},
      spanCol24: ['cause', 'amountType', 'analyse', 'executeScheme'],
      userInfo: {
        time: '2022-07-04 16:30:38',
        user: '用户名'
      },
      objMap: {
        cause: '报销事由',
        createName: '报销人',
        createTime: '创建时间',
        totalAmount: '总金额',
        status: '状态',
      },
      objSort: ['cause', 'createName', 'createTime', 'totalAmount', 'status'],
      objSort1: ['totalAmount'],
    }
  },
  created() {
    this.getExpenseData(this.expensesId);
  },
  methods: {
    getExpenseData(id){
      this.$request.get('/expenses/getDetailExpenseData/' + id ).then(res => {
        if (res.code === '200') {   // 表示操作成功
          this.expenseData = res.data.expenses
          this.expenseDetailData = res.data.details
          this.recordDetailData = res.data.records
        } else {
          this.$message.error(res.msg)  // 弹出错误的信息
        }
      })
    },
  },
}
</script>

<style scoped>
.dialog-row {
  border: 1px solid #edeff2;
  border-bottom: none;
  display:flex;
  flex-wrap:wrap;
  font-size:14px;
  .col {
    display: flex;
    height: 100%;
    min-height:40px;
    border-bottom: 1px solid #edeff2;
    .col-title {
      width: 172px;
      display: flex;
      align-items: center;
      height: auto;
      overflow: hidden;
      color: #3C4658;
      font-weight: 500;
      padding-left: 10px;
      background: #f7f8fa;
      text-align: center;
    }
    .col-title-expenses{
      flex: 1;
      display: flex;
      align-items: center;
      height: auto;
      overflow: hidden;
      color: #3C4658;
      font-weight: 500;
      padding-left: 10px;
      background: #f7f8fa;
      text-align: center;
    }
    .col-content {
      flex: 1;
      display: flex;
      align-items: center;
      padding: 10px;
      box-sizing: border-box;
      overflow: hidden;
      color: #12171f;
    }
  }
}
</style>
